<template>
  <div class="posR">
    <div class="formBox marT20">
      <div class="flexBet formItem borB">
        <div
          class="formHeadText flex1"
          :class="{ borR: k != headData.length - 1 }"
          v-for="(i, k) in headData"
          :key="k"
        >
          {{ i.title }}
        </div>
      </div>
      <div
        class="flexBet formItem"
        v-for="(i, k) in mainList"
        :key="k"
        :class="{ borB: k != mainList.length - 1 }"
      >
        <div
          class="formHeadText flex1"
          :class="{ borR: n != headData.length - 1 }"
          v-for="(j, n) in headData"
          :key="n"
        >
          <input
            type="text"
            class="flex1"
            v-model="mainList[k][`${headData[n].ajaxStr}`]"
            :disabled="$store.state.iptDis"
          />
        </div>
      </div>
    </div>
    <div class="posA add" @click="$emit('add')">+</div>
  </div>
</template>

<script>
export default {
  props: {
    headData: {
      type: Array,
      default: () => [
        {
          title: "获奖时间",
          ajaxStr: "getTime",
        },
        {
          title: "奖项名称",
          ajaxStr: "prizeName",
        },
        {
          title: "奖励等级",
          ajaxStr: "prizeLevel",
        },
        {
          title: "获奖部门(单位)",
          ajaxStr: "deptName",
        },
      ],
    },
    mainList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.borR {
  border-right: 1px solid #b8babd;
}
.borB {
  border-bottom: 1px solid #b8babd;
}
.formBox {
  border: 1px solid #b8babd;
  border-radius: 12px;
  .formItem {
    height: 43px;
    .formHeadText {
      //   margin-right: -1px;
      text-align: center;
      height: 100%;
      line-height: 43px;
    }
  }
}
.add {
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #b8babd;
  width: 18px;
  text-align: center;
  line-height: 18px;
  cursor: pointer;
}
</style>